<template>
	<view class="w center-main">
		<uv-image :src="logoImg" width="200rpx" height="200rpx" radius="20rpx"></uv-image>
		<view class="c-purcle">Easy Bite System</view>

		<view class="box">
			
			<view class="c-red">{{countStore.count}}</view>
			<uv-button type="primary" shape="circle" @click="()=>countStore.add()">pinia++</uv-button>
			
			
			<uv-button type="success" shape="circle" class="button" @click="toLogin">跳转路由</uv-button>
			
			
			<uv-button type="success" shape="circle" class="button" @click="()=>modal.open()">弹出层</uv-button>
			
			
			<view style='color: aqua;'>{{env}}</view>
			<view style="color:red">{{getRequestHost()}}</view>
			
			<uv-button type="success" shape="circle" class="button" @click="login('17676171250','111111')">后端api</uv-button>
			<uv-button type="success" shape="circle" class="button" @click="baidu()">第三方api</uv-button>
			
		</view>


		<uv-modal ref="modal" title="标题" content='模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作'></uv-modal>
	</view>
</template>
<script lang='ts' setup>
	import logoImg from '@/static/images/logo.png'
	import {ref} from 'vue'
	import {useCountStore} from '@/stores'
	import {login,baidu} from '@/api/login'
    import {getRequestHost} from '@/utils/host'
	
	const env = process.env.NAME
	
	const modal = ref('')
	const countStore = useCountStore()
   
   const toLogin=()=>uni.navigateTo({url: '/pages/login/login'})
</script>
<style lang="scss" scoped>
	.center-main {
		height: 100vh;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		align-items: center;

	}

	.c-purcle {
		color: #a357ec;
		font-size: 50rpx;
		padding: 30rpx 0;
	}

	.box {
		width: 250rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		text-align: center;
	}

	.c-red {
		color: red;
		font-size: 40rpx;
	}
</style>